<template>
  <baidu-map class="map" center="长沙" :scroll-wheel-zoom="true">
  <!--
    center      圆心
    radius      距离（米）
  -->
    <bm-circle
      :center="circlePath.center"
      :radius="circlePath.radius"
      stroke-color="red"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      @lineupdate="updateCirclePath"
      :editing="false"
    ></bm-circle>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      circlePath: {
        center: {
          lng: 112.969401,
          lat: 28.191919,
        },
        radius: 500,
      },
    };
  },
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
      this.circlePath.radius = e.target.getRadius();
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
